<!--
 * @Date: 2025-06-30 17:40:30
 * @LastEditTime: 2025-07-04 19:05:04
-->
<template>
  <div class="precheck-wrapper">
    <!-- 蓝色卡片状态栏 -->
    <div class="precheck-status-card">
      <div class="precheck-status-left">
        <template v-if="status === 'checking'">

          <span class="precheck-status-text">{{ $t('test.objectmigration.createtask.steps.precheck.precheck.text_yjcz') }}</span>
        </template>
        <template v-else>
          <a-icon style="font-size:40px;color:#52c41a;margin-right:12px;" type="check-circle" />
          <span class="precheck-status-text">{{ $t('test.objectmigration.createtask.steps.precheck.precheck.text_yjcwc') }}</span>
        </template>
      </div>
      <div class="precheck-status-right">
        <span v-if="status === 'checking'">预检查开始时间：{{ startTime }}</span>
        <span v-else>预检查结束时间：{{ endTime }}</span>
      </div>
    </div>
    <!-- 重新预检查按钮 -->
    <div style="margin: 24px 0 12px 0;">
      <a-button @click="initpreCheck">{{ $t('test.objectmigration.createtask.steps.precheck.precheck.text_zxyjc') }}</a-button>
    </div>
    <!-- 预检查表格 -->
    <a-table :dataSource="tableData" :columns="columns" bordered :pagination="false" class="precheck-table">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'result'">
          <span style="color:#52c41a;font-weight:600;"><a-icon type="check" style="margin-right:4px;" />{{ $t('test.objectmigration.createtask.steps.precheck.precheck.text_cg') }}</span>
        </template>
        <template v-else-if="column.dataIndex === 'action'">
          <a style="color:#1890ff;cursor:pointer;" @click="openViewResult(column, record)">{{ $t('test.objectmigration.createtask.steps.precheck.precheck.text_ck') }}</a>
        </template>
      </template>
    </a-table>
  </div>
  <div class="flex justify-center">
    <a-button type="primary" @click="prev" style="margin-right: 10px;">{{ $t('test.objectmigration.createtask.steps.precheck.precheck.text_syb') }}</a-button>
    <a-button type="primary" @click="next">{{ $t('test.objectmigration.createtask.steps.precheck.precheck.text_xyb') }}</a-button>
  </div>
    <viewResults
      :open="viewResult"
      :itemRecord="itemRecord"
      @update:open="close"
  />
</template>

<script setup>
import { ref,defineEmits,onMounted } from 'vue';
import { Table, Button, Switch } from 'ant-design-vue';
import { CheckCircleOutlined, CheckOutlined } from '@ant-design/icons-vue';
import * as http from '@/api/flow/createTask';
import { useStore } from 'vuex';
import viewResults from "./viewResult/index.vue";

const store = useStore();
const status = ref('checking'); // 'checking' or 'done'
const startTime = ref(new Date().toLocaleString());
const endTime = ref(new Date().toLocaleString());
const columns = [
  { title: $t('test.objectmigration.createtask.steps.precheck.precheck.title_yjcx'), dataIndex: 'category', key: 'category' },
  { title: $t('test.objectmigration.createtask.steps.precheck.precheck.title_ms'), dataIndex: 'cmd', key: 'cmd' },
  { title: $t('test.objectmigration.createtask.steps.precheck.precheck.title_jcjg'), dataIndex: 'result', key: 'result' },
  { title: $t('test.objectmigration.createtask.steps.precheck.precheck.title_cz'), dataIndex: 'action', key: 'action' },
];
const tableData = ref([])
const deployisShow = ref(false);
const viewResult = ref(false); // 查看结果
const itemRecord = ref(); // 查看结果的记录
const initpreCheck = async () => {
  const res = await http.PrecheckConfiguration({
    sysType:'migration',
    flowId: store.state.taskInfo.migrationFlowId,
  });
  if (res.code == "000000") {
    console.log(
      store.state.taskInfo.migrationFlowId
    )
    // dataSource.value = res.data;
    initWebsocket({ flowID: store.state.taskInfo.migrationFlowId });
  }

};
const openViewResult = (column, record) => {
  console.log(record, "record");
  viewResult.value = true;
  itemRecord.value = record;
};
const close = () => {
  deployisShow.value = false;
  viewResult.value = false;
};
const webSocket = ref(null);
const encode = (str) => {
  // 对字符串进行编码
  const encode = encodeURI(str);
  // 对编码的字符串转化base64
  const base64 = btoa(encode);
  return base64;
};
const initWebsocket = (params) => {
  webSocket.value = null;
  webSocket.value = new WebSocket(
    `${http.PreCheckWebSocketWebSock()}/` +
      "{" +
      encode(JSON.stringify(params)) +
      "}"
  );
  console.log("this.webSocket: ", webSocket);
  webSocket.value.onopen = websocketonopen;
  webSocket.value.onmessage = websocketonmessage;
};
const websocketonopen = () => {
  console.log($t('preCheck.connectSuccess'));
};
const websocketonmessage = (event) => {
  let data = JSON.parse(event.data);

  tableData.value = data.list;

  if (data.success + data.fail == data.total_task_total) {
    websocketclose();
    status.value = 'done';
    endTime.value = new Date().toLocaleString();
  }
};
const next = () => {
  emit('next')
}
const prev = () => {
  emit('prev')
}
const websocketclose = () => {
  webSocket.value.close();
};
onMounted(() => {
  initpreCheck()
})
const emit = defineEmits(['next','prev'])
</script>

<style scoped>
.precheck-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0 24px 0;
}
.precheck-status-card {
  background: #e6f7ff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 32px 24px 32px;
  margin-bottom: 24px;
}
.precheck-status-left {
  display: flex;
  align-items: center;
}
.precheck-status-text {
  font-size: 22px;
  font-weight: 600;
  color: #222;
}
.precheck-status-right {
  font-size: 15px;
  color: #666;
}
.precheck-table {
  background: #fff;
  border-radius: 6px;
  margin-top: 8px;
}
</style>